<template>
  <view class="consume-list-page">
    <!-- 消费明细列表 -->
    <view class="order-list">
      <view 
        class="order-item" 
        v-for="(item, index) in orderList" 
        :key="index"
        @click="handleOrderClick(item)"
      >
        <!-- 订单顶部信息（类型/支付状态/价格） -->
        <view class="order-top">
          <text class="type-tag" :class="item.typeClass">{{ item.type }}</text>
          <text class="pay-status" :class="item.paymentStatusClass">{{ item.paymentStatus }}</text>
          <text class="order-price">￥{{ item.price.toFixed(2) }}</text>
        </view>

        <!-- 订单号 -->
        <view class="order-no">订单号：{{ item.orderNo }}</view>

        <!-- 用户信息（照片+姓名+手机号） -->
        <view class="user-info">
          <image class="user-avatar" :src="item.avatar" mode="scaleToFill"></image>
          <view class="user-detail">
            <text class="user-name">{{ item.name }}</text>
            <text class="user-phone">{{ item.phone }}</text>
          </view>
        </view>

        <!-- 订单日期 -->
        <view class="order-date">{{ item.date }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 模拟消费订单数据（类型/支付状态使用中文）
const orderList = ref([
  {
	  typeClass:"received",
    type: '已接单', // 中文类型
	paymentStatusClass:"paid",
    paymentStatus: '已支付', // 中文支付状态
    price: 128.5,
    orderNo: 'DD20240315-001',
    avatar: 'https://via.placeholder.com/80x80?text=用户头像',
    name: '张小明',
    phone: '138-1234-5678',
    date: '2024-03-15 14:30'
  },
  {
	  typeClass:"completed",
    type: '已成功',
		paymentStatusClass:"unpaid",
    paymentStatus: '未支付',
    price: 88.0,
    orderNo: 'DD20240315-002',
    avatar: 'https://via.placeholder.com/80x80?text=用户头像',
    name: '李芳',
    phone: '159-8765-4321',
    date: '2024-03-15 16:15'
  },
  {
	    typeClass:"received",
    type: '已接单',
    paymentStatus: '已支付',
		paymentStatusClass:"paid",
    price: 299.0,
    orderNo: 'DD20240315-003',
    avatar: 'https://via.placeholder.com/80x80?text=用户头像',
    name: '王建国',
    phone: '186-2345-6789',
    date: '2024-03-15 18:45'
  }
]);

// 点击订单项回调
const handleOrderClick = (item) => {
  uni.showToast({
    title: `查看订单：${item.orderNo}`,
    icon: 'none',
    duration: 1500
  });
};
</script>

<style lang="less" scoped>
.consume-list-page {
  padding: 32rpx 24rpx;
  background-color: #f5f7fa;
  min-height: 100vh;

  .order-list {
    .order-item {
      background: #fff;
      border-radius: 16rpx;
      padding: 32rpx 24rpx;
      margin-bottom: 24rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);

      // 订单顶部信息行（类型/支付状态/价格）
      .order-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20rpx;

        // 订单类型标签（中文类名）
		
		
		// 已接单状态（中文类名）
		.received{
			background: #e6f4ff;
			color: #1890ff;
		}
		
		// 未支付状态（中文类名）
		.paid {
		  background: #fff2f0;
		  color: #ff4d4f;
		}
		
		// // 已成功状态（中文类名）
		.unpaid {
		  background: #f6ffed;
		  color: #52c41a;
		}
        .type-tag {
          padding: 4rpx 12rpx;
          border-radius: 8rpx;
          font-size: 24rpx;
          font-weight: 500;
          
          
        
        }
		
		// 已支付状态（中文类名）
		.paid {
		  background: #f6ffed;
		  color: #52c41a;
		}

        // 支付状态标签（中文类名）
        .pay-status {
          padding: 4rpx 12rpx;
          border-radius: 8rpx;
          font-size: 24rpx;
          font-weight: 500;
          
        
          
        
        }

        // 订单价格
        .order-price {
          font-size: 32rpx;
          font-weight: 600;
          color: #ff4d4f;
        }
      }

      // 订单号
      .order-no {
        font-size: 24rpx;
        color: #999;
        margin-bottom: 24rpx;
      }

      // 用户信息行（高度100rpx）
      .user-info {
        display: flex;
        align-items: center;
        height: 100rpx;
        margin-bottom: 20rpx;

        // 用户头像
        .user-avatar {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          margin-right: 20rpx;
          flex-shrink: 0;
        }

        // 用户详情（姓名+手机号）
        .user-detail {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;

          // 用户姓名
          .user-name {
            font-size: 28rpx;
            color: #333;
            font-weight: 500;
            margin-bottom: 4rpx;
          }

          // 用户手机号
          .user-phone {
            font-size: 24rpx;
            color: #999;
          }
        }
      }

      // 订单日期
      .order-date {
        font-size: 24rpx;
        color: #999;
        text-align: right;
      }
    }
  }
}
</style>